<template>
	<view class="" style="background-image: linear-gradient(to bottom, #dceaff, #ffffff); padding: 30rpx;">
		<view style="">
			<button class="ft_box" open-type="getPhoneNumber" @getphonenumber="loginAndRegister($event)"
				v-if="!isLogin " @click="clickPhoneNumber">
				<view class="ft_ft_box">
					<view class="ft_ft_lt" style="width: 140rpx; height: 140rpx;">
						<image src="https://paole.hebeixiaoyu.cn/run/profile/upload/avatar.png" mode="aspectFit" width="140rpx" height="140rpx">
						</image>
					</view>
					<view class="ft_ft_info" style="color: white">

						<view class="" style="font-size: 36rpx; margin-top: 10rpx;">
							点击登陆
						</view>
					</view>
				</view>
				<view class="" style="color: white;">
					<text class="arrow-icon">></text>
				</view>
			</button>
			<view class="ft_box" v-else>
				<view class="ft_ft_box">
					<view class="ft_ft_lt" style="width: 140rpx; height: 140rpx;" @click="logintp()">
						<image :src="login_data.avatar" mode="aspectFill" width="140rpx" height="140rpx"></image>
					</view>
					<view class="ft_ft_info" style="color: white">
						<view class="" style="display: flex;">
							<view class="" style="font-weight: 900;font-size: 36rpx" @click="logintp()">
								{{login_data.nikeName}}
							</view>
							<view class=""
								style="background-color: #f9ad28; font-size: 28rpx; padding: 5rpx 15rpx; border-radius: 25rpx; margin-left: 30rpx;"
								@click="Rname()">
								{{ idstatus === 0 ? '未实名' : '已实名' }}
							</view>
						</view>
						<view class="" @click="logintp()" style="font-size: 28rpx; margin-top: 20rpx;">
							修改资料
						</view>

					</view>
				</view>
				<view class="" style="color: white;" @click="logintp()">
					<text class="arrow-icon">></text>
				</view>
			</view>
			<view class="sd_box">
				<view @click="ck(item.tit,item)" class="sd_box_list" v-for="(item,index) in datas" :key="index">
					<view class="ft_ft_box">
						<view class="ft_ft_lt" style="width: 60rpx; height: 60rpx;">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="ft_ft_info">

							{{item.tit}}

						</view>
					</view>
					<view class="">
						<text class="arrow-icon">></text>
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<!-- 客服电话对话框 -->
			<view class="dialog-mask" v-if="showKfDialog" @click="hideKfDialog">
				<view class="dialog-container">
					<view class="dialog-header">客服电话</view>
					<view class="dialog-body">
						<view class="phone-container">
							<text class="phone-number" id="kfPhone">{{kfphone}}</text>
							<button class="copy-btn" @click="copyPhone">复制电话</button>
						</view>
						<view class="img-container" v-if="kfimg">
							<image :src="kfimg" mode="aspectFit" style="width: 200rpx; height: 200rpx;"></image>
						</view>
					</view>
					<view class="dialog-footer">
						<button class="close-btn" @click="hideKfDialog">关闭</button>
					</view>
				</view>
			</view>
		</view>
		<view class="member-dialog-mask" v-if="!payShow" @click="payCancel">
			<view class="member-dialog-container">
				<view class="member-dialog-header">确定要成为会员吗?</view>
				<view class="member-dialog-body">{{payMess}}</view>
				<view class="member-dialog-footer">
					<button class="cancel-btn" @click="payCancel">取消</button>
					<button class="confirm-btn" @click="payConfirm">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		getLogin,
		getRegister,
		getLinkkf,
		postrealNamestatus,
		userMoney,
		recharge
	} from "@/api/index.js"
	import {
		getSchoolMengerPhone,
		isShangHuShenQingGuoMa
	} from "@/api/xiaoquan.js"

	let payShow = ref(true)
	let payMess = ref('')
	const login_data = ref("")
	const isLogin = ref(false);
	const token = ref('')
	const tog = ref(true)
	const datas = ref([{
			img: "../../static/image/member.png",
			tit: "我的余额",
			url: "/package/pages/balance/balance"
		},
		{
			img: "https://paole.hebeixiaoyu.cn/run/profile/upload/shimingrenzheng.png",
			tit: "实名认证",
			url: "/package/pages/smrz/smrz"
		},
		{
			img: "https://paole.hebeixiaoyu.cn/run/profile/upload/chengweihuiyuan.png",
			tit: "成为会员",
			url: "/package/pages/huiyuan/huiyuan"
		},

		{
			img: "../../static/image/sqjd.png",
			tit: "申请接单",
			url: "/package/pages/reqOrder/reqOrder"
		},
		{
			img: "../../static/image/ghxq.png",
			tit: "更换校区",
			url: "/package/pages/selectSchool/selectSchool"
		},
		{
			img: "../../static/image/shsq.png",
			tit: "商户申请",
			url: "/package/pages/reqShanghu/reqShanghu"
		},
		{
			img: "../../static/image/lxkf.png",
			tit: "联系客服",
			url: ""
		},
		{
			img: "../../static/image/ysxy.png",
			tit: "隐私协议",
			url: "/package/pages/yinsixieyi/yinsixieyi"
		},
		{
			img: "../../static/image/yjfk.png",
			tit: "意见反馈",
			url: "/package/pages/yijianfankui/yijianfankui"
		},
		{
			img: "../../static/image/gywm.png",
			tit: "关于我们",
			url: "/package/pages/guanyuwomen/guanyuwomen"
		},
	])
	const kfimg = ref()
	const kfphone = ref('')
	const loginInfo = ref()
	const idstatus = ref()
	const logincode = ref('')

	// 客服对话框状态
	const showKfDialog = ref(false)

	const payConfirm = () => {
		recharge().then(res => {
				if (res.code == 1) {
					payCancel()
					uni.requestPayment({
						provider: "wxpay",
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						paySign: res.data.paySign,
						signType: res.data.signType,
						orderInfo: {
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
						},
						success(res) {
							uni.showToast({
								title: '支付成功',
								duration: 1000,
							})
						},
						fail(err) {
							console.log(err)
						}
					})
				} else {
					uni.showToast({
						title: res.msg,
						duration: 1000,
					})
				}

			})
			.catch(err => {
				console.log(err)
			})
	}
	const payCancel = () => {
		payShow.value = true
	}

	const ck = (e, item) => {
		if (!isLogin.value) {
			uni.showToast({
				title: "请先登录",
				icon: "none"
			})
			return;
		}
		if (e == "联系客服") {
			// 调用获取客服电话接口
			getSchoolMengerPhone().then((res) => {
				if (res && res.data) {
					kfphone.value = res.data; // 从res.data获取电话号码
					showKfDialog.value = true; // 显示客服电话对话框
				} else {
					uni.showToast({
						title: '获取客服电话失败',
						icon: 'none'
					})
				}
			})
			return
		}

		// 判断如果实名认证之后，则不需实名
		if (e == "实名认证") {
			// 判断是否实名认证
			if (uni.getStorageSync('isrealnameauthenticated')) {
				uni.showToast({
					title: "您已实名",
					icon: "none"
				})
				return;
			}

		}


		// 
		// 判断如果实名认证之后，则不需实名
		if (e == "商户申请") {
			// 判断是否实名认证
			if (isShangHuShenQing.value) {
				uni.showToast({
					title: "您已申请",
					icon: "none"
				})
				return;
			}

		}

		uni.navigateTo({
			url: item.url
		})
	}

	const clickPhoneNumber = async () => {
		logincode.value = await getCode()
		console.log(logincode.value)
	}

	const loginAndRegister = ({
		detail
	}) => {
		if (detail.errMsg != 'getPhoneNumber:ok') {
			console.log('微信授权获取手机号失败', detail)
			return
		}
		if (detail.errMsg == 'getPhoneNumber:ok') {
			let sessionKey = logincode.value;
			let iv = detail.iv;
			let encryptedData = detail.encryptedData;
			getLogin({
				sessionKey,
				iv,
				encryptedData
			}).then(res => {
				console.log("登录结果")
				console.log(res)
				console.log(uni.getStorageSync("token"))
				uni.setStorageSync('login_data', res.data);
				console.log('res.data', res.data);
				isLogin.value = true;

				uni.setStorageSync('token', res.data.token);
				if (res.data.depId != null && res.data.depId != '') {
					uni.setStorageSync('school_id', res.data.depId);
					uni.setStorageSync('school_name', res.data.depName);
					uni.setStorageSync('runDepartmentList', res.data.list);
				}
				// 判断是否为会员
				if (res.data.isVip != null && res.data.isVip != '' && res.data.isVip > -1) {
					uni.setStorageSync('isVip', true);
				} else {
					uni.setStorageSync('isVip', false);
				}

				// 判断是否实名认证
				console.log(res.data.isrealnameauthenticated, 2222222222222, res.data
					.isrealnameauthenticated == 1)
				uni.setStorageSync('isrealnameauthenticated', res.data.isrealnameauthenticated);
				// 先更新本地数据
				login_data.value = res.data;
				// 再存储到本地存储
				uni.setStorageSync('login_data', res.data);
				isLogin.value = true;

				// 直接更新实名认证状态
				idstatus.value = res.data.isrealnameauthenticated;
				if (res.code == 200) {
					uni.showToast({
						title: '登陆成功',
						icon: 'success'
					});

				} else {
					uni.showToast({
						title: '登陆失败',
						icon: 'success'
					});
					isLogin.value = false;
				}
			}).catch((er) => {
				console.log('登录失败！' + er);
				isLogin.value = false;
			})
		}
	}

	const getCode = () => {
		return new Promise((resolve, reject) => {
			uni.login({
				provider: 'weixin',
				success: res => {
					resolve(res.code)
				},
				fail: reject
			})
		})
	}

	const logintp = () => {
		uni.navigateTo({
			url: "/package/pages/myInfo/myInfo"
		})
	}
	const Rname = () => {
		if (uni.getStorageSync('isrealnameauthenticated')) {
			// 打印您已经认证
			uni.showToast({
				title: '您已经认证',
				icon: 'none'
			})
		} else {
			uni.navigateTo({
				url: "/package/pages/smrz/smrz"
			})
		}
	}

	// 复制电话号码
	const copyPhone = () => {
		if (!kfphone.value) {
			uni.showToast({
				title: '复制失败',
				icon: 'none'
			})
			return
		}

		uni.setClipboardData({
			data: kfphone.value,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				})
			},
			fail: () => {
				uni.showToast({
					title: '复制失败',
					icon: 'none'
				})
			}
		})
	}

	// 隐藏客服对话框
	const hideKfDialog = () => {
		showKfDialog.value = false
	}
	// true 是已申请过
	const isShangHuShenQing = ref(false);
	onLoad(() => {
		console.log(token.value)
		if (token.value) {
			login_data.value = uni.getStorageSync("login_data")
		}
		isLogin.value = !!token.value;
		if (isLogin.value) {
			idstatus.value = login_data.value.isrealnameauthenticated;
		}
		isShangHuShenQingGuoMa().then((res) => {
			isShangHuShenQing.value = res.data;
		})

	})
	onShow(() => {
		console.log( uni.getStorageSync("login_data"))
		token.value = uni.getStorageSync("token")
		if (token.value) {
			login_data.value = uni.getStorageSync("login_data");
					console.log( uni.getStorageSync("login_data"))
			idstatus.value = login_data.value.isrealnameauthenticated
			setTimeout(() => {
				loginInfo.value = uni.getStorageSync('school_info').id
			}, 100)
			console.log("你好");
			isLogin.value = !!token.value;
		}
		idstatus.value = uni.getStorageSync('isrealnameauthenticated');
	})
</script>

<style>
	.ft_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		background-color: #3c91ff;
		padding: 30rpx;
		border-radius: 20rpx;
		height: 240rpx;
	}

	.ft_ft_box {
		display: flex;
		align-items: center;
	}

	.ft_ft_lt image {
		border-radius: 50%;
	}

	.ft_ft_info {
		margin-left: 20rpx;
		font-size: 32rpx;
		color: #000;
	}

	.sd_box {
		background-color: white;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 0 30rpx;
	}

	.sd_box_list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #e8f2ff;
		padding: 40rpx 0rpx;
	}

	.footer {
		padding: 30rpx 0;
		text-align: center;
		color: #ccc;
	}

	/* 箭头图标样式 */
	.arrow-icon {
		font-size: 36rpx;
		font-weight: bold;
	}

	/* 客服对话框样式 */
	.dialog-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.dialog-container {
		background-color: white;
		border-radius: 16rpx;
		width: 80%;
		max-width: 600rpx;
		overflow: hidden;
	}

	.dialog-header {
		padding: 30rpx 20rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #eee;
	}

	.dialog-body {
		padding: 40rpx 30rpx;
		text-align: center;
	}

	.phone-container {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.phone-number {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.copy-btn {
		background-color: #3c91ff;
		color: white;
		padding: 10rpx 96rpx;
		border-radius: 25px;
		font-size: 28rpx;
	}

	.img-container {
		margin-top: 30rpx;
	}

	.dialog-footer {
		padding: 20rpx 0;
		border-top: 1rpx solid #eee;
	}

	.close-btn {
		width: 100%;
		background-color: #f5f5f5;
		color: #666;
		padding: 15rpx 0;
		font-size: 32rpx;
	}

	/* 会员对话框样式 */
	.member-dialog-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 998;
	}

	.member-dialog-container {
		background-color: white;
		border-radius: 16rpx;
		width: 80%;
		max-width: 600rpx;
		overflow: hidden;
	}

	.member-dialog-header {
		padding: 30rpx 20rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #eee;
	}

	.member-dialog-body {
		padding: 40rpx 30rpx;
		text-align: center;
		font-size: 32rpx;
	}

	.member-dialog-footer {
		display: flex;
		border-top: 1rpx solid #eee;
	}

	.cancel-btn,
	.confirm-btn {
		flex: 1;
		padding: 25rpx 0;
		text-align: center;
		font-size: 32rpx;
	}

	.cancel-btn {
		color: #666;
		border-right: 1rpx solid #eee;
		background-color: #f5f5f5;
	}

	.confirm-btn {
		color: #3c91ff;
		font-weight: bold;
		background-color: #f5f5f5;
	}
</style>